<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      </el-breadcrumb>
      <p>个人信息</p>
    </el-card>

    <!-- 负责人信息 -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <p>个人信息</p>
        </el-col>
        <el-col :span="10">
          <el-form ref="storeInfoFrom" :model="adminFrom" label-width="100px">
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item label="微信">
              <el-input v-model="adminFrom.weixin" placeholder="请输入微信"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="adminFrom.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="QQ">
              <el-input v-model="adminFrom.qq" placeholder="请输入QQ"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="adminFrom.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
    </el-card>

    <!-- 账号信息 -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <p>账号信息</p>
        </el-col>
        <el-col :span="10" class="elLinkBox">
          <el-form ref="storeInfoFrom" :model="adminFrom" label-width="100px">
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item label="手机账号">
              <el-input v-model="adminFrom.phone" placeholder="请输入账号" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="adminFrom.password"
                placeholder="请输入新密码"
                :disabled="!isReset"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" v-show="isReset">
              <el-input type="password" v-model="newPassword" placeholder="再次输入新密码"></el-input>
            </el-form-item>
          </el-form>
          <el-link type="primary" :underline="false" @click="Reset">{{isReset?'取消修改':'重制密码'}}</el-link>

          <!-- 提交和返回按钮 -->
          <el-button style="margin:10px 0 10px 100px" type="primary" @click="editInfo">提交</el-button>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adminFrom: {
        name: "",
        weixin: "",
        phone: "",
        qq: "",
        email: "",
        password: "",
      },
      newPassword: "",
      isReset: false,
    };
  },
  methods: {
    //重置密码按钮
    Reset() {
      this.isReset = !this.isReset;
      if (this.isReset)
        return ([this.adminFrom.password, this.newPassword] = "");
      this.getInfo();
    },
    //获取个人信息
    async getInfo() {
      this.adminFrom.phone = window.sessionStorage.getItem("phone");
      const { data: res } = await this.$axios.get("/vip/admin/phone", {
        params: {
          phone: this.adminFrom.phone,
        },
      });
      if (res.code != 0) return this.$message.error("获取个人信息失败!");
      this.adminFrom = res.data;
      this.newPassword = this.adminFrom.password;
    },
    //修改个人信息
    async editInfo() {
      if (!this.adminFrom.password) return this.$message.error("请输入密码!");
      if (this.adminFrom.password != this.newPassword)
        return this.$message.error("请确认密码是否输入正确!");
      const { data: res } = await this.$axios.post(
        "/vip/admin/update",
        this.adminFrom
      );
      window.sessionStorage.setItem("name", this.adminFrom.name);
      this.getInfo();
      this.$message.success("个人信息修改成功!");
      this.Reset();
    },
  },
  mounted() {
    //渲染个人信息
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
.elLinkBox {
  position: relative;
  .el-link {
    position: absolute;
    top: 116px;
    right: -70px;
  }
}
</style>